<template>
    <!-- 普通在线地址 -->
    <a v-if="isExternalLink" :href="href.replace('#/','')" v-bind="$attrs" >
        <slot></slot>
    </a>
    <!-- 导航跳转 -->
    <a v-else :href="href"  v-bind="$attrs" :class="{active:isActive,exactActive:isExactActive}">
        <slot></slot>
    </a>
</template>

<script setup>
// import {getCurrentInstance} from "vue";
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'



// 组合式接收props的方法
// defineProps(["a","b","c"])   数组写法 (对应属性名接收 一个一个写)
let props = defineProps({   //对象写法
    ...RouterLink.props,  // NavLink接收的属性和router-link保持一致
    inactiveClass: String,  
})

// let app = getCurrentInstance();
// console.log(app);
// console.log(app.props);
// console.log(useLink(app.props));
// console.log(useLink(props));



// 组合式接收自定义事件的方法
defineEmits(["update:value"]);

// props  => 组件内接收的所有属性的对象 this.$props
const { route, href, isActive, isExactActive, navigate } = useLink(props)

// // 判断是否是在线地址  https://www.baidu.com
const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http')
)







</script>

<style lang="scss" scoped>

.active{
    color:red
  }
</style>